<template>
  <div class="cardbag_page">
    <div class="pageLoading" v-if="isPageLoading">
      <van-loading size="24px" vertical type="spinner">拼命加载中...</van-loading>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text=""
      @load="onLoad"
       v-if="listData.length"
    >
      <div class="cardbag_box">
        <ul class="cardbag_list">
          <li class="cardbag_item" v-for="cardItem in listData" :key="cardItem.id+'card'">
            <span class="ci_title">满减券</span>
            <div class="ci_left">
              <div class="ci_amount">
                <span class="ci_symbol">￥</span>
                <span class="ci_num">{{cardItem.amount}}</span>
              </div>
              <p>满{{cardItem.enough}}元可用</p>
            </div>
            <div class="ci_right">
              <span v-if="cardItem.isGive">不可赠送</span>
              <button @click="giveFn(cardItem)" v-else>去赠送</button>
            </div>
          </li>
        </ul>
        <div class="card_remind">
          <p><i></i><span>每次只能使用一张优惠券</span></p>
          <p><span>（不支持ios系统使用）</span></p>
        </div>
      </div>
    </van-list>
    <div class="cardbag_nodata" v-if="isNoData">
      <div class="img_box"><img src="@/assets/img/nodata.png" alt=""></div>
      <p>您暂时没有优惠券哦~</p>
    </div>
    <van-dialog v-model="isShowGiveDialog" :showConfirmButton="false" :class="'give_dialog'">
      <template v-if="giveObj">
        <h5>温馨提示</h5>
        <div class="gd_input"><input v-model="phoneNum" ref="numInput" type="text" placeholder="请输入受赠方手机号"></div>
        <div class="coupon_item_p">
          <div class="ci_amount">
            <span class="ci_symbol">￥</span>
            <span class="ci_num">{{giveObj.amount}}</span>
            <span class="ci_text">满{{giveObj.enough}}元可用</span>
          </div>
          <span class="ci_title">满减券</span>
        </div>
        <div class="gd_btns">
          <button @click="isShowGiveDialog=false">取 消</button>
          <button class="active" @click="giveSubmitFn">确 定</button>
        </div>
      </template>
    </van-dialog>
  </div>
</template>
<script>
export default {
  props: {},
  data() {
    return {
      isShowGiveDialog:false, //赠送框
      loading:true,
      isPageLoading:true, //只加载一次
      finished:false,
      listData:[],
      page:1,
      size:10,
      isNoData:false,
      giveObj:null,
      phoneNum:'',
      numReg:/^1[3456789]\d{9}$/,
    };
  },
  created() {
    this.getListData();
  },
  watch:{
    phoneNum(nVal){ //限制输入格式（纯数字，必须11位）
      let reg = /^[0-9]*$/;
      if(reg.test(nVal)){
        this.phoneNum = this.phoneNum.slice(0,11);
      }else{
        this.phoneNum = nVal.slice(0,nVal.length-1);
      }
    }
  },
  methods: {
    onLoad(){
      if(!this.finished){
        this.getListData();
      }
    },
    getListData(){
      this.loading = true;
      this.$axios.get("/api/customer/GetCoupon",{
        params:{
          page:this.page,
          size:this.size
        }
      }).then(res => {
        this.isPageLoading = false;
        this.loading = false;
        if(res.data.code == '0'){
          let listData = res.data.data;
          if(this.page == 1 && !listData.length){
            this.isNoData = true;
          }else{
            this.listData = this.listData.concat(listData);
            if(listData.length < this.size){
              this.finished = true;
            }else{
              this.finished = false;
              this.page++;
            }
          }
        }
        this.$store.commit('unreadMsg',0);
      });
    },
    giveFn(giveObj){  //点击赠送按钮
      if(this.giveObj && this.giveObj.id != giveObj.id){  //赠送其他优惠券清空上一张优惠券的赠送信息
        this.phoneNum = '';
      }
      this.giveObj = giveObj;
      this.isShowGiveDialog = true;
      setTimeout(()=>{
        this.$refs.numInput.focus();
      });
    },
    giveCardData(){
      this.$axios.post('/api/customer/GiveCouponOther', {
        id: this.giveObj.id,
        Mobile: this.phoneNum
      }).then(res => {
        if (res.data.code == 0) {
          this.$toast(res.data.msg);
          this.initPage();
          this.isShowGiveDialog = false;  //赠送成功才关闭弹框
        }else{
          this.$toast(res.data.msg);
        }
      });
    },
    initPage(){
      this.page = 1;
      this.listData = [];
      this.finished = false;
      this.getListData();
    },
    giveSubmitFn(){
      if(this.numReg.test(this.phoneNum)){
        this.giveCardData();
      }else{
        this.$toast('请按正确格式填写手机号');
      }
    }
  },
};
</script>

<style lang='stylus'>
@import '~@/common/common.styl';
.cardbag_page{
  overflow: hidden
}
.cardbag_list{
  padding: rem(30)
}
.cardbag_item{
  position: relative
  height: rem(189)
  bgp('~@/assets/img/cardbag_bg.png')
  overflow: hidden
  margin-bottom: rem(20)
  .ci_left{
    float: left
    width: rem(436)
    height: 100%
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center
    font-size 0
    .ci_amount{
      font-size: 0
      .ci_symbol{
        font-size: rem(34)
        color: #93513f
      }
      .ci_num{
        font-size: rem(60)
        color: #93513f
      }
    }
    p{
      font-size: rem(26)
      color: #92503e
    }
  }
  .ci_right{
    display: flex
    justify-content: center
    align-items: center
    float: right
    width: rem(253)
    height: 100%
    button{
      border none
      width: rem(151)
      height: rem(61)
      background-color: #ac6856
      border-radius: rem(10)
      font-size rem(26)
      color: #fff
    }
    span{
      font-size rem(26)
      color: #93513f
    }
  }
  .ci_title{
    position absolute
    top 0
    left 0
    display inline-block
    height: rem(49);
    line-height rem(49)
    padding 0 rem(22)
    color #92503f
    font-size rem(26)
    background-color: #eed1a4;
    border-radius:rem(10) 0px rem(10) 0px; 
  }
}
.card_remind{
  text-align: center
  margin: rem(120) 0 rem(160)
  p{
    line-height: rem(36)
  }
  i{
    display: inline-block
    width: rem(28)
    height: rem(28)
    bgp('~@/assets/img/cardbag_wt.png')
    vertical-align: middle
    margin-right: rem(10)
  }
  span{
    display: inline-block
    font-size rem(25)
    color: #888
    vertical-align: middle

  }
}
.give_dialog{
  width: rem(601)
  box-sizing: border-box
  border-radius: rem(16)
  padding: rem(43)
  h5{
    font-size rem(36)
    text-align: center
    color: #333
  }
  .gd_input{
    height: rem(91)
    padding: 0 rem(26)
    margin-top: rem(40)
    border-radius: rem(10)
    background-color: #f8f8f8
    input{
      width: 100%
      height: 100%
      border none
      background-color: transparent
      font-size rem(30)
      color: #666
    }
    input::-webkit-input-placeholder{
      color: #888
    }
  }
  .gd_btns{
    margin-top: rem(56) 
    display: flex
    justify-content: space-between
    button{
      width: rem(241)
      height: rem(85)
      font-size rem(30)
      border-radius: rem(10)
      border: 1px solid #fd7f2c
      color: #fd7f2c
      background-color: #fff
      &.active{
        color: #fff
        background-color: #fd7f2c
        border-color: #fd7f2c
      }
    }
  }
}
couponItem()
.coupon_item_p{
  margin-top: rem(20)
  height: rem(141)
  .ci_amount{
    .ci_symbol{
      font-size:rem(28)
    }
    .ci_num{
      font-size:rem(48)
      margin-left: rem(8)
    }
    .ci_text{
      font-size:rem(26)
      margin-left: rem(17)
    }
  }
  .ci_title{
    height: rem(39)
    line-height rem(39)
    padding: 0 rem(14)
    font-size rem(22)
  }
}
.cardbag_nodata{
  text-align: center
  padding-top: 35vh
  .img_box{
    width: rem(300)
    height: rem(240)
    margin: 0 auto
    img{
      width: 100%
    }
  }
  p{
    font-size: rem(26)
    color: #888
  }
}
.pageLoading{
  padding-top:44vh
}
</style>